<template>
  <div class="call">
    <div class="little" v-for="(item, index) in displaylist" :key="index">
    <div class="littles" >
      <div class="title">
        <span>{{ item.alarmSortName }}</span>
        <button class="button" @click="handleCheckAllChange(item,item.alarmSortName)">
          全选
        </button>
      </div>
        <div style="height: 90%; overflow: hidden; overflow: auto;" >
          <div class="leixing" v-for="(item,index) in item.alarmLevels" :key="index">
            <div class="ypqei" :class="{red:item.alarmLevel==3,yellow:item.alarmLevel==2,green:item.alarmLevel==1}">
              {{ item.alarmLevelName }}</div>
              <div>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                 <el-checkbox  v-for="(item,index) in item.alarmTypes" :label="item.alarmType" :key="index" >
                  {{item.alarmTypeName}}
                 </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CallPoliceGjtemplate',
props:['item','checklist', 'displaylist'],
  data() {
    return {
      checkedCities: [],
      allChenkVal: [],
      arr: [],
      flag:true
    };
  },

  mounted() {
    // console.log(this.item.alarmSortName);
  },
  methods: {
        // 全选按钮
    handleCheckAllChange(val, name) {
      // 拿到所选中的报警类型
      const array=[]
      for (let i = 0; i < val.alarmLevels.length; i++){
        val.alarmLevels[i].alarmTypes.forEach(ele => {
          array.push(ele.alarmType)
        })
      }
      // 判断所选中的类型数组是否全部包含在多选框双向绑定的数组当中
      this.flag =  array.every(item =>this.checkedCities.includes(item));
      // 双重for循环拿到所点击的类型下所有多选框根据flag字段判断全选还是全取消
      for (let i = 0; i < val.alarmLevels.length; i++) {
        for (let j = 0; j < val.alarmLevels[i].alarmTypes.length; j++){
          // 判断如果所选中的类型数组不全部包含在多选框双向绑定的数组当中就全选中
          if (!this.flag) {
            this.checkedCities.push(val.alarmLevels[i].alarmTypes[j].alarmType)
          } else {
            // 判断如果所选中的类型数组全部包含在多选框双向绑定的数组当中就全删除
            this.checkedCities.forEach((item, index) => {
              for (let a = 0; a < array.length; a++) {
                if (item == array[a]) {
                  this.checkedCities.splice(index,1)
                }
              }
            })
          }
        }
      }
      this.$emit('updateAll', this.checkedCities)
    },
    // 单选框按钮
    handleCheckedCitiesChange(value) {
      this.$emit('updateAll', value)
    },
  },
  watch: {
    immediate: true,
    deep: true,
    checklist(val) {
      // if (val.length !== 0) {
        this.checkedCities = val
        // this.$emit('updateAll', val)
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
  .call{
      display: flex;
        flex-wrap: wrap;
        // justify-content: flex-start;
        // justify-content:space-between;
        align-content: flex-start;
        overflow: hidden;
        overflow: auto;
        height: 80%;
        width: 100%;
        .little{
          width: 32%;
          // height: 700px;
          height: auto;
          padding: 10px;
          border: 1px solid #409eff; 
          border-radius: 5px;
          margin-bottom: 10px;
          margin-right: 10px;
          .title{
            display: flex;
            justify-content: space-between;
            .button{
              width: 70px;
              height: 30px;
              background-color: #1890ff;
              color: #fff;
              border: none;
              border-radius: 3px;
            }
          }
          .leixing{
            margin: 10px 0;
            .ypqei{
              font-size: 14px;
              margin-bottom: 10px;
            }
            ::v-deep .el-checkbox{
              width: 50%;
              display: inline-block;
              ::v-deep .el-checkbox__label{
                color: #000;
              }
            }
          }
        }
     }
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.red{
  color: red;
}
.green{
  color: #18bef5;
}
.yellow{
  color: #e6ad00;
}
.littles{
          .title{
            display: flex;
            justify-content: space-between;
            .button{
              width: 70px;
              height: 30px;
              background-color: #a4adb3;
              color: #fff;
              border: none;
              border-radius: 3px;
            }
          }
          .leixing{
            margin: 10px 0;
            .ypqei{
              font-size: 14px;
              margin-bottom: 10px;
            }
            ::v-deep .el-checkbox{
              width: 50%;
              display: inline-block;
              ::v-deep .el-checkbox__label{
                color: #000;
              }
            }
          }
        }
</style>